<ng-container *ngIf="isLoading">
  <div fxLayoutAlign="center">
    <mat-progress-spinner mode="indeterminate"></mat-progress-spinner>
  </div>
</ng-container>

<ng-container *ngIf="!isLoading">
  <mat-list>
    <mat-list-item>
      <div matLine fxLayout="row" fxLayout.xs="column" fxLayoutAlign="space-between center">
        <h3 class="font-weight-700">
          {{"price_chart_7d" | i18n}}
        </h3>
        <img class="sparkline" alt="sparkline"
             src="https://s2.coinmarketcap.com/generated/sparklines/web/7d/usd/573.png">
      </div>
    </mat-list-item>
    <mat-list-item>
      <div matLine fxLayout="row" fxLayout.xs="column" fxLayoutAlign="space-between center">
        <h3 class="font-weight-700">
          {{"price" | i18n}} SATS
        </h3>
        <div>
          {{getPriceSats()}}
        </div>
      </div>
    </mat-list-item>
    <mat-list-item>
      <div matLine fxLayout="row" fxLayout.xs="column" fxLayoutAlign="space-between center">
        <h3 class="font-weight-700">
          {{"price" | i18n}} USD
        </h3>
        <div>
          {{getPriceUsd()}}
        </div>
      </div>
    </mat-list-item>
    <mat-list-item>
      <div matLine fxLayout="row" fxLayout.xs="column" fxLayoutAlign="space-between center">
        <h3 class="font-weight-700">
          {{"volume_24h" | i18n}}
        </h3>
        <div>
          {{get24hVolume()}}
        </div>
      </div>
    </mat-list-item>
    <mat-list-item>
      <div matLine fxLayout="row" fxLayout.xs="column" fxLayoutAlign="space-between center">
        <h3 class="font-weight-700" fxLayoutAlign="center">
          {{"available_supply" | i18n}}
        </h3>
        <div fxLayout="row" fxLayoutAlign="start end">
          <span>
            {{getAvailableSupply()}}
          </span>
          <span class="font-size-10">
            ({{getRelativeSupply()}})
          </span>
        </div>
      </div>
    </mat-list-item>
    <mat-list-item>
      <div matLine fxLayout="row" fxLayout.xs="column" fxLayoutAlign="space-between center">
        <h3 class="font-weight-700">
          {{"market_capitalization" | i18n}}
        </h3>
        <div>
          {{getMarketCap()}}
        </div>
      </div>
    </mat-list-item>
    <mat-list-item>
      <div matLine fxLayout="row" fxLayout.xs="column" fxLayoutAlign="space-between center">
        <h3 class="font-weight-700">
          {{"yesterdays_change" | i18n}}
        </h3>
        <div [ngClass]="{fg_green: !isChangeNegative(), fg_red: isChangeNegative()}">
          {{getYesterDaysChange()}}
        </div>
      </div>
    </mat-list-item>
    <mat-list-item>
      <div matLine fxLayout="row" fxLayout.xs="column" fxLayoutAlign="space-between center">
        <h3 class="font-weight-700">
          {{"market_rank" | i18n}}
        </h3>
        <div>
          {{getMarketRank()}}
        </div>
      </div>
    </mat-list-item>
  </mat-list>
</ng-container>
